<template>
<div class="login-register">
  <div class="contain">
    <div class="big-box" :class="{active:isLogin}">
      <div class="big-contain" key="bigContainLogin" v-if="isLogin">
        <div class="btitle">答者登录</div>
        <div class="hintBarr">
          <div class="hinton" id="accountLogin" @click="changeLoginStatue1">账号密码登录</div>
          <div class="hintoff" id="phoneLogin" @click="changeLoginStatue2">手机验证码登录</div>
        </div>
        <div class="bform">
          <div class="bform1" v-if="LoginMethod">
            <input type="text" placeholder="账号" v-model="form.username"></input>
            <!--            <span class="errTips" v-if="emailError">* 电话填写错误 *</span>-->
            <input type="password" placeholder="密码" v-model="form.userpwd"></input>
            <span class="errTips" v-if="passwordError">* 密码填写错误 *</span>
          </div>
          <div class="bform1" v-else>
            <input  type="text" placeholder="电话号码" v-model="form.usertelnumber">
            <div class="box">
              <input id="codeinput" type="text" placeholder="短信验证码" v-model="form.verification" ></input>
              <button class="el-button" ref="yzbutton" style="margin-left: 3%" @click="sendCode">获取验证码{{ num }}</button>
            </div>
          </div>
        </div>

        <button class="bbutton" @click="login">登录</button>
        <div style="font-size: 14px;margin-top: 3%" >
<!--          问卷的链接-->
          <a class="aa" @click="touristIn">没有账号？游客访问 </a>
        </div>
      </div>

      <div class="big-contain" key="bigContainRegister" v-else>
        <div class="btitle">创建答者账户</div>
        <div class="bform">
          <input type="text" placeholder="账号" v-model="form.username">
          <span class="errTips" v-if="existed">* 账号已经存在！ *</span>
          <input type="password" placeholder="密码" v-model="form.userpwd">
          <input type="text" placeholder="设置密保问题" v-model="form.question">
          <input type="text" placeholder="设置密保答案" v-model="form.answer">
          <input type="tel" placeholder="电话号码" v-model="form.usertelnumber">
          <div class="box">
            <input id="codeinput" type="text" placeholder="短信验证码" v-model="form.verification"></input>
            <button class="el-button" ref="yzbutton" style="margin-left: 3%" @click="sendCode">获取验证码{{ num }}</button>
          </div>
        </div>
        <button class="bbutton" @click="Register">注册</button>
      </div>
    </div>
    <div class="small-box" :class="{active:isLogin}">
      <div class="small-contain" key="smallContainRegister" v-if="isLogin">
        <div class="stitle">你好，朋友!</div>
        <p class="scontent">开始注册，和我们一起问卷之旅</p>
        <button class="sbutton" @click="changeToRegister">注册</button>
      </div>
      <div class="small-contain" key="smallContainLogin" v-else>
        <div class="stitle">欢迎回来!</div>
        <p class="scontent">使用问卷系统，请登录你的账户</p>
        <button class="sbutton" @click="changeToLogin">登录</button>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {loginByPwdAnswerer, loginSmsAnswerer, registerAnswerer, registersmsAnswerer} from "../../api/loginRegist";

export default {
  name: "answerLogin",
  data() {
    return {
      //需要回答的问卷id
      surveyId: '',
      //登录者的id
      loginerId: '',
      //登录方式，如果为true为账号密码登录，false为验证码登录
      LoginMethod: true,

      clearable: true,
      //为true表示正在登录，用来控制页面显示
      isLogin: true,
      telError: false,
      passwordError: false,
      existed: false,
      verificationerror: false,
      //验证码倒计时
      num: "",
      form: {
        username: '',
        usertelnumber: '',
        userpwd: '',
        verification: '',
        TenementName: '',
        question: '',
        answer: ''
        // choose: ''
      },
    }
  },

  created() {
    this.surveyId = this.$route.query.surveyId
  },

  methods:{
    touristIn(){
      this.sureyId = this.$route.query.sureyId
      this.$router.push({
        path:'/touristFinishSurvey',
        query:{
          surveyId:this.surveyId
        }
      })

    },
    async sendCode() {
      const tel = this.form.usertelnumber
      if (!tel) {
        this.$message.warning("请输入手机号码")
        return
      }
      if (!/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/.test(tel)) {
        this.$message.warning("请输入正确格式的手机号")
        return
      }
      this.$refs.yzbutton.setAttribute('disabled', true)
      this.$refs.yzbutton.setAttribute('cursor', 'not-allowed')
      this.num = 10
      let num = setInterval(() => {
        this.num -= 1
        if (this.num < 1) {
          clearInterval(num)
          this.$refs.yzbutton.removeAttribute('disabled')
          this.num = ""
        }
      }, 1000)
      //答者发送短信以登录
      if(this.isLogin){
        loginSmsAnswerer(tel).then((response) => {
          console.log(response.data)
          if (response.data.code == 200) {
            this.$message.success(response.data.message)
          } else {
            this.$message.error(response.data.message)
          }
        })
      }else {
        registersmsAnswerer(tel).then((response) => {
          console.log("验证码注册")
          console.log(response)
          if (response.data.code == 200) {
            this.$message.success(response.data.message)
          } else {
            this.$message.warning(response.data.message)
          }
        })
      }
    },

    changeLoginStatue1() {
      this.LoginMethod = true
      document.getElementById("accountLogin").className = "hinton"
      document.getElementById("phoneLogin").className = "hintoff"
    },
    changeLoginStatue2() {
      this.LoginMethod = false
      document.getElementById("accountLogin").className = "hintoff"
      document.getElementById("phoneLogin").className = "hinton"
    },
    changeToLogin() {

      this.isLogin = true
      this.LoginMethod = true

      this.form.username = ''
      this.form.usertelnumber = ''
      this.form.userpwd = ''
      this.form.verification = ''

      // document.getElementById("phoneLogin").className="hintoff"
    },
    changeToRegister() {

      this.isLogin = false
      this.form.username = ''
      this.form.usertelnumber = ''
      this.form.userpwd = ''
      this.form.verification = ''

    },

    login(){
      const data = {
        username: this.form.username,
        password: this.form.userpwd
      }
      if(this.LoginMethod){
        if (this.form.username != "" && this.form.userpwd != "") {
          loginByPwdAnswerer(data.username, data.password).then((response) => {
            console.log("用户账号密码登录")
            console.log(response)
            if (response.data.code == 200) {
              // this.$message.success(response.data.message)
              //跳转到主页
              this.$router.push({path: '/answerer'})
              const loginerInfo = response.data.data
              window.sessionStorage.setItem('data', JSON.stringify(loginerInfo))
            }
            else{
              this.$message.warning(response.data.message)
            }

          })
            .catch(err => {
              console.log(err);
            })
        } else {
          this.$message.warning("账号密码不能为空")
        }
      }

    },
    Register(){
      const Answer = {
        username: this.form.username,
        password: this.form.userpwd,
        telnumber: this.form.usertelnumber,
        str: this.form.verification,
        securityQuestionAnswer: this.form.answer,
        securityQuestionContext: this.form.question
      }
      if (this.form.username !== "" && this.form.usertelnumber != "" && this.form.userpwd != ""&& this.form.answer!=""&&this.form.question!="") {
        registerAnswerer(Answer.username, Answer.telnumber, Answer.str, Answer.password,
          Answer.securityQuestionAnswer, Answer.securityQuestionContext, this.form.TenementName).then((response) => {
          console.log("答者注册")
          console.log(response)
          if (response.data.code == 200) {
            // this.$message.success(response.data.message)
            //跳转界面
            this.$router.push({path: '/answerer'})
            const loginerInfo = response.data.data
            window.sessionStorage.setItem('data', JSON.stringify(loginerInfo))
          } else {
            this.$message.error(response.data.message)
          }

        }).catch(err => {
          console.log(err);
        })
      } else {
        this.$message.warning("请将表单填写完整！")
      }
    }
  }

}
</script>

<style scoped>
.aa{
  text-decoration: underline;
  cursor: pointer;
}
.el-button {
  height: 30px;
  /*text-align: justify-all;*/
}

.hintBarr {
  display: flex;
  flex-direction: row;
  align-content: space-around;
  padding: 5px;
}

.hintBarr .hinton {
  font-size: 14px;
  cursor: pointer;
  color: #7EA2C1;
  text-decoration: underline;
  margin-left: 5px;
  margin-right: 5px;
}
.hintBarr .hintoff {
  font-size: 14px;
  cursor: pointer;

  margin-left: 5px;
  margin-right: 5px;
}

.box {
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-content: space-around;
  align-items: center;

}
.login-register {
  background-image: url("../../assets/background.jpg");
  background-size: 100% 100%;
  margin: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}
.contain {
  width: 60%;
  height: 60%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 3px #f0f0f0,
  0 0 6px #f0f0f0;
}

.big-box {
  width: 70%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 30%;
  transform: translateX(0%);
  transition: all 1s;
}

.big-contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}

.btitle {
  font-size: 1.5em;
  font-weight: bold;
  color: rgb(81, 133, 206);
}

.bform {
  width: 100%;
  height: auto;
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.bform1 {
  width: 100%;
  height: auto;
  padding: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.bform1 .errTips {
  display: block;
  width: 50%;
  text-align: left;
  color: red;
  font-size: 0.7em;
  margin-left: 1em;
}

.bform1 input {
  width: 50%;
  height: 30px;
  border: none;
  outline: none;
  border-radius: 10px;
  margin-top: 4px;
  padding-left: 2em;
  background-color: #f0f0f0;
}
.bform input {
  width: 50%;
  height: 30px;
  border: none;
  outline: none;
  border-radius: 10px;
  margin-top: 4px;
  padding-left: 2em;
  background-color: #f0f0f0;
}

.bbutton {
  width: 20%;
  height: 40px;
  border-radius: 24px;
  border: none;
  outline: none;
  background-color: rgb(81, 133, 206);
  color: #fff;
  font-size: 0.9em;
  cursor: pointer;
}
.bbutton:hover{
  box-shadow: 0px 3px 3px 0px rgb(36, 59, 97);
}


.small-box {
  width: 30%;
  height: 100%;
  background: linear-gradient(135deg, rgb(127, 193, 212), rgb(81, 132, 200));
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0%);
  transition: all 1s;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

.small-contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stitle {
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
}

.scontent {
  font-size: 0.8em;
  color: #fff;
  text-align: center;
  padding: 2em 4em;
  line-height: 1.7em;
}

.sbutton {
  width: 60%;
  height: 40px;
  border-radius: 24px;
  border: 1px solid #fff;
  outline: none;
  background-color: transparent;
  color: #fff;
  font-size: 0.9em;
  cursor: pointer;
}
.sbutton:hover {
  box-shadow: 0px 3px 3px 0px #1e3d61;
}

.big-box.active {
  left: 0;
  transition: all 0.5s;
}

.small-box.active {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  transform: translateX(-100%);
  transition: all 1s;
}
</style>
